<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 设置页面的字符编码为UTF-8，这是确保页面能正确显示各种字符，避免出现乱码现象的基础配置 -->
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!-- 引入基础样式表文件，该文件通常会定义一些全局通用的样式规则，比如重置浏览器默认的边距、设置默认字体、字号、颜色等基础样式，为整个页面的统一风格奠定基础 -->
    <link rel="stylesheet" href="../css/base.css">
    <!-- 引入表单相关的样式表文件，用于专门针对页面中的表单元素（像输入框、按钮、提示信息等）进行特定样式的设置，使其能呈现出符合设计预期的外观和布局效果 -->
    <link rel="stylesheet" href="../css/form.css">
</head>

<body>
    <!-- 页面头部区域的容器，使用了自定义的类名“header”和“container”，“header”一般用于标识此处是页面的头部部分，“container”大概率是让该元素在页面中水平居中显示，这里展示的是“注册页面”这一标题文字 -->
    <div class="header container">注册页面</div>
    <form>
        <!-- 用于显示用户名已存在时的错误提示信息，添加“error”类名方便后续在 CSS 文件中针对这类错误提示信息统一设置样式，比如将文字颜色设置为醒目的红色，字号适当加大等，以突出显示给用户，让其知晓输入的用户名不符合要求 -->
        <span class="error">用户名已存在，请更换！</span>
        <label>
            <!-- 用户名输入框的标签及对应的输入框元素，“username”类名可用于在 CSS 样式表中为该输入框定制特定样式，例如设置输入框的宽度、高度、边框样式、背景颜色等外观属性，此处输入框类型设置为“text”，表示用户可以输入普通的文本内容作为用户名 -->
            用户名：&nbsp;&nbsp; <input type="text" class="username">
        </label>
        <label>
            <!-- 密码输入框的标签及对应的输入框元素，“password”类名用于在 CSS 中对其进行样式定制，不过这里输入框类型当前为“text”，正常情况下密码输入框应设置为“password”类型，这样用户输入密码时内容会以加密形式（如黑点或星号等）显示，保护用户隐私，可能此处是示例代码还需完善，它用于让用户输入注册账号的密码 -->
            密&nbsp;&nbsp;&nbsp;码： &nbsp;&nbsp;<input type="text" class="password">
        </label>
        <label>
            <!-- 确认密码输入框的标签及对应的输入框元素，“rpassword”类名方便 CSS 中设置其样式，同样类型为“text”（可按需改为“password”类型），用于让用户再次输入密码，以便后续进行密码一致性的验证，确保用户两次输入的密码是相同的 -->
            确认密码： &nbsp;&nbsp;<input type="text" class="rpassword">
        </label>
        <label>
            <!-- 昵称输入框的标签及对应的输入框元素，“nickname”类名用于在 CSS 中定义该输入框的样式，输入框类型是“text”，方便用户输入自己想要设置的昵称内容，用于在注册后的账号展示等场景 -->
            昵&nbsp;&nbsp;&nbsp;称：&nbsp;&nbsp; <input type="text" class="nickname">
        </label>
        <p>
            <!-- 提供一个提示信息及链接，告知用户如果已经拥有账号，可以通过点击“直接登录”链接跳转到登录页面（"./login.html"），方便已有账号的用户进行相应操作 -->
            已有账号，<a href="./login.html">直接登录</a>
        </p>
        <button>注册</button>
    </form>
    <!-- 引入与注册功能相关的 JavaScript 脚本文件，采用模块类型（type="module"），意味着该脚本文件内部可能运用了 ES6 模块语法来组织代码，便于进行代码的模块化管理和维护，在这个脚本中通常会包含诸如表单数据验证（如检查用户名是否符合规范、两次密码是否一致等）、向服务器发送注册请求等相关的业务逻辑代码 -->
    <script src="../js/register.js" type="module"></script>
</body>

</html>